{% extends 'lib/_base.html' %}
{% load static %}


{% block header_tail %}
    <link rel="stylesheet" href="{% static 'zhongbao/zhongbao_admin/css/style.css' %}">
    <link rel="stylesheet" href="{% static 'zhongbao/zhongbao_admin/css/iconfont.css' %}">
    <style>
        .login-banner {
            width: 100%;
            background: url("{% static 'public/img/banner2.jpg' %}") center bottom/cover no-repeat;
        }
    </style>
{% endblock %}

{% block wrapper_content %}
    <div class="login-nav fix">
        <ul class="f-r">
            <li><a href="#">首页</a></li>
            <li><a href="#">说明</a></li>
        </ul>
    </div>
    <div class="login-banner"></div>
    <div class="login-box">
        <div class="box-con tran">
            <div class="login-con f-l">
                <form action="{% url 'zhongbao_admin:login' %}" method="post">{% csrf_token %}
                <div class="form-group">
                    <input type="text" name="username" placeholder="用户名/手机号码"/>
                    <span class="error-notic">用户名/手机号码不正确</span>
                </div>
                <div class="form-group">
                    <input type="password" name="password" placeholder="密码">
                    <span class="error-notic">密码不正确</span>
                </div>
                <div class="form-group">
                    <button type="submit" class="tran pr" id="login-btn">
                        <span  class="tran">登录</span>
                        <img id="login-loading-img" class="loading" src="{% static 'public/img/loading.gif' %}" style="display:none">
                    </button>
                </div>
                    </form>
                <div class="from-line"></div>
                <div class="form-group">
                    <a href="javascript:;" class="move-signup a-tag tran blue-border">还没有帐号？免费注册<i
                            class="fa fa-arrow-circle-right"></i></a>
                </div>
                <div class="form-group">
                    <a href="javascript:;" class="move-reset a-tag tran">忘记密码？重置 <i
                            class="fa fa-arrow-circle-right"></i></a>
                </div>
                <!--
                <div class="form-group">
                    <a href="javascript:;" class="move-other a-tag tran">使用第三方帐号登录<i class="iconfont tran">&#xe606;</i></a>
                </div>
                -->
            </div>
            <!-- 登录 -->

            <div class="signup f-l">
                <div class="form-group">
                    <div class="signup-form">
                        <input type="text" placeholder="手机号码" class="email-mobile" onblur="verify.verifyMobile(this)"
                               id="mobile-verify-input">
                        {#                        <a href="javascript:;" class="signup-select">邮箱注册</a>#}
                    </div>
                    <span class="error-notic">手机号码格式不正确</span>
                </div>
                <div class="signup-email" style="display: none;">
                    <div class="form-group">
                        <input type="text" placeholder="用户名" onblur="verify.UsernameVerify(this)">
                        <span class="error-notic">用户名必须以字母或数字开头，且只能包含数字、字母和@+-符号</span>
                    </div>
                    <div class="form-group">
                        <input type="password" placeholder="密码（字母、数字，至少6位）" onblur="verify.PasswordLenght(this)">
                        <span class="error-notic">密码长度不够</span>
                    </div>
                    <div class="form-group">
                        <button type="submit" class="tran pr">
                            <a href="javascript:;" class="tran">注册</a>
                            <img class="loading" src="images/loading.gif">
                        </button>
                    </div>
                    <p class="view-clause">点击注册，即同意我们的 <a href="#">用户隐私条款</a></p>
                </div><!-- 邮箱注册 -->

                <div class="signup-tel form-group" style="">
                    <div class="signup-form" id="message-inf" style="display:none">
                        <input type="text" placeholder="短信验证码" style="width:180px;" onblur="verify.VerifyCount(this)"
                               id="register_verify_code">
                        <a href="javascript:;" class="reacquire" id="count-down-a">重新获取（<span
                                id="verify-count-down">60</span>）</a>
                        <a href="javascript:;" class="reacquire" id="reset-verify-a"
                           style="color: #00b3ee; display: none; margin-left: 25px;">重新获取</a>
                        <span class="error-notic">验证码输入错误</span>
                    </div>
                    <div class="form-group">
                        <button class="tran get-message pr" id="get_verify_btn_register">
                            <a href="javascript:;" class="tran">获取短信验证码</a>
                            <img class="loading" src="{% static 'public/img/loading.gif' %}">
                        </button>

                        <button class="tran pr move-addinf" id="verify_btn_register_next" style="display: none">
                            <a href="javascript:;">下一步</a>
                        </button>
                    </div>
                </div><!-- 手机号码注册 -->

                <div class="from-line"></div>
                <div class="form-group">
                    <a href="javascript:;" class="move-login a-tag tran blue-border">已有帐号？登录<i
                            class="fa fa-arrow-circle-right">
                    </i></a>
                </div>
                <div class="form-group">
                    <a href="javascript:;" class="move-reset a-tag tran">忘记密码？重置 <i
                            class="fa fa-arrow-circle-right"></i></a>
                </div>
                <!--
                <div class="form-group">
                    <a href="javascript:;" class="move-other a-tag tran">使用第三方帐号登录<i class="iconfont tran">&#xe606;</i></a>
                </div>
                -->
            </div>
            <!-- 注册 -->

            <!-- 第三方登录 暂时不用 -->
            <div class="other-way f-l">
                <div class="form-group">
                    <button type="submit" class="tran pr">
                        <a href="javascript:;" class="tran">QQ帐号登录</a>
                        <img class="loading" src="images/loading.gif">
                    </button>
                </div>
                <div class="form-group">
                    <button type="submit" class="tran pr">
                        <a href="javascript:;" class="tran">新浪微博帐号登录</a>
                        <img class="loading" src="images/loading.gif">
                    </button>
                </div>
                <div class="form-group">
                    <button type="submit" class="tran pr">
                        <a href="javascript:;" class="tran">微信帐号登录</a>
                        <img class="loading" src="images/loading.gif">
                    </button>
                </div>
                <div class="form-group">
                    <button type="submit" class="tran pr">
                        <a href="javascript:;" class="tran">网易帐号登录</a>
                        <img class="loading" src="images/loading.gif">
                    </button>
                </div>
                <div class="from-line"></div>
                <div class="form-group">
                    <a href="javascript:;" class="move-signup a-tag tran blue-border">还没有帐号？免费注册<i
                            class="fa fa-arrow-circle-right"></i></a>
                </div>
                <div class="form-group">
                    <a href="javascript:;" class="move-login a-tag tran">已有帐号？登录<i class="fa fa-arrow-circle-right">
                    </i></a>
                </div>
            </div>
            <!-- 第三方登录 -->

{#            <div class="mimachongzhi f-l">#}
{#                <div class="form-group send-email">#}
{#                        <div class="form-group">#}
{#                            <input name="email" type="text" placeholder="请输入您的邮箱地址" id="email-address" onblur="verify.verifyEmail(this)">#}
{#                            <span class="error-notic">邮箱格式不正确</span>#}
{#                        </div>#}
{#                        <div class="form-group">#}
{#                            <button type="submit" class="tran pr" id="send-reset-code" >#}
{#                                <span  class="tran">发送重置密码邮件</span>#}
{#                            </button>#}
{#                        </div>#}
{#                </div>#}
{#                <div class="email-verify" style="display: none">#}
{#                    <form action="{% url 'zhongbao_admin:reset' %}" method="POST">{% csrf_token %}#}
{#                        <div class="form-group">#}
{#                            <input type="hidden" id="reset-count" name="user-email" >#}
{#                        </div>#}
{#                        <div class="form-group">#}
{#                            <input type="text" placeholder="邮件验证码" style="width:180px;"#}
{#                                   id="reset_verify_code" onblur="verify.VerifyEmailCount(this)">#}
{#                            <span class="error-notic">验证码输入错误</span>#}
{#                        </div>#}
{#                        <div class="form-group">#}
{#                        <input id="register_p1_reset" name="password" type="password" placeholder="密码（字母、数字，至少6位）"#}
{#                               onblur="verify.PasswordLenght(this)"/>#}
{#                        <span class="error-notic">必须为6位以上字母加数字</span>#}
{#                        </div>#}
{#                        <div class="form-group">#}
{#                            <input type="password" placeholder="请再一次输入密码" onblur="verify.PasswordAccordance(this)"/>#}
{#                            <span class="error-notic">两次输入的密码不一致</span>#}
{#                        </div>#}
{#                        <button type="submit" class="tran pr" id="verify-reset-code"  >#}
{#                            <span  class="tran">确认修改</span>#}
{#                            <img class="loading" src="images/loading.gif">#}
{#                        </button>#}
{#                    </form>#}
{#                </div>#}
{##}
{#                <div class="from-line"></div>#}
{#                <div class="form-group">#}
{#                    <a href="javascript:;" class="move-signup	a-tag tran blue-border">还没有帐号？免费注册<i#}
{#                            class="fa fa-arrow-circle-right"></i></a>#}
{#                </div>#}
{#                <div class="form-group">#}
{#                    <a href="javascript:;" class="move-login a-tag tran">已有帐号？登录<i class="fa fa-arrow-circle-right">#}
{#                    </i></a>#}
{#                </div>#}
{#            </div>#}
            <!-- 密码重置 -->

            <form action="{% url 'zhongbao_admin:register' %}" method="post">{% csrf_token %}
                <div style="display: none;">
                    <input type="text" name="mobile" id="mobile_post">
                </div>
                <div class="mimachongzhi f-l">
                <div class="form-group send-email">
                        <div class="form-group">
                            <input name="email" type="text" placeholder="请输入您的邮箱地址" id="email-address" onblur="verify.verifyEmail(this)">
                            <span class="error-notic">邮箱格式不正确</span>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="tran pr" id="send-reset-code" >
                                <span  class="tran">发送重置密码邮件</span>
                            </button>
                        </div>
                </div>
                <div class="email-verify" style="display: none">
                    <form action="{% url 'zhongbao_admin:reset' %}" method="POST">{% csrf_token %}
                        <div class="form-group">
                            <input type="hidden" id="reset-count" name="user-email" >
                        </div>
                        <div class="form-group">
                            <input type="text" placeholder="邮件验证码" style="width:180px;"
                                   id="reset_verify_code" onblur="verify.VerifyEmailCount(this)">
                            <span class="error-notic">验证码输入错误</span>
                        </div>
                        <div class="form-group">
                        <input id="register_p1_reset" name="password" type="password" placeholder="密码（字母、数字，至少6位）"
                               onblur="verify.PasswordLenght(this)"/>
                        <span class="error-notic">必须为6位以上字母加数字</span>
                        </div>
                        <div class="form-group">
                            <input type="password" placeholder="请再一次输入密码" onblur="verify.PasswordAccordance(this)"/>
                            <span class="error-notic">两次输入的密码不一致</span>
                        </div>
                        <button type="submit" class="tran pr" id="verify-reset-code"  >
                            <span  class="tran">确认修改</span>
                            <img class="loading" src="images/loading.gif">
                        </button>
                    </form>
                </div>

                <div class="from-line"></div>
                <div class="form-group">
                    <a href="javascript:;" class="move-signup	a-tag tran blue-border">还没有帐号？免费注册<i
                            class="fa fa-arrow-circle-right"></i></a>
                </div>
                <div class="form-group">
                    <a href="javascript:;" class="move-login a-tag tran">已有帐号？登录<i class="fa fa-arrow-circle-right">
                    </i></a>
                </div>
            </div>

                    <!--
                    <div class="form-group">
                        <a href="javascript:;" class="move-other a-tag tran">使用第三方帐号登录<i class="iconfont tran">&#xe606;</i></a>
                    </div>
                    -->

            <!-- 密码重置 -->
{#                <div class="mobile-success f-l">#}
{#                    <p>手机号 <span id="mobile_display_span">186****7580</span> 验证成功</p>#}
{#                    <p>请完善您的账号信息，完成注册</p>#}
{#                    <div class="form-group">#}
{#                        <input name="email" type="text" placeholder="邮箱" class="email-mobile"#}
{#                               onblur="verify.verifyEmail(this)"/>#}
{#                        <span class="error-notic">邮箱格式不正确</span>#}
{#                    </div>#}
{#                    <div class="form-group">#}
{#                        <input type="text" name="username" placeholder="用户名" onblur="verify.UsernameVerify(this)">#}
{#                        <span class="error-notic">用户名必须以字母或数字开头，且只能包含数字、字母和@+-符号</span>#}
{#                    </div>#}
{#                    <div class="form-group">#}
{#                        <input id="register_p1" name="password" type="password" placeholder="密码（字母、数字，至少6位）"#}
{#                               onblur="verify.PasswordLenght(this)"/>#}
{#                        <span class="error-notic">必须为6位以上字母加数字</span>#}
{#                    </div>#}
{#                    <div class="form-group">#}
{#                        <input type="password" placeholder="请再一次输入密码" onblur="verify.PasswordAccordance(this)"/>#}
{#                        <span class="error-notic">两次输入的密码不一致</span>#}
{#                    </div>#}
{#                    <div class="form-group">#}
{#                        <button type="submit" class="tran pr">#}
{#                            <span href="javascript:;" class="tran">注册</span>#}
{#                            <img class="loading" src="images/loading.gif">#}
{#                        </button>#}
{#                    </div>#}
{#                    <p class="view-clause">点击注册，即同意我们的 <a href="{% url 'zhongbao_admin:terms' %}">用户隐私条款</a></p>#}
{#                </div>#}
                <input type="hidden" name="u" id="u" value=""/>
            </form>
            <!-- 手机注册成功添补信息 -->
        </div>
    </div>

    <div class="login-footer">
        地址：北京市海淀区北四环西路56号辉煌时代大厦15层    联系电话：400-052-1288<br>
        Copyright&nbsp;&nbsp;&copy;&nbsp;&nbsp;2012-2020&nbsp;&nbsp;istarshine.com.All&nbsp;&nbsp;rights&nbsp;&nbsp;reserved<br>
        <a>隐私保护</a>　北京智慧星光信息技术有限公司　<a >版权所有</a>　<a href="https://beian.miit.gov.cn/" target="_blank">ICP备12009876号-1</a>
        <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802008588" target="_blank">京公网安备11010802008588号</a>
    </div>
{% endblock %}

{% block body_tail %}
    <script src="{% static 'public/js/password.js' %}"></script>
    <script>
        function getUrlParam(name){
            var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
            var r = window.location.search.substr(1).match(reg);  //匹配目标参数
            if (r!=null) return unescape(r[2]); return null; //返回参数值
        }
        $("#u").val(getUrlParam(u));
        var _handle = false;//储存电话是否填写正确
        var _handlebt = false;
        var mobile_verify_input = $('#mobile-verify-input');//手机验证字段
        var mobile_validateReg = /^((\+?86)|(\(\+86\)))?1\d{10}$/;
        var reset_timer = null;

        var register_verify_code = $('#register_verify_code');

        // 60秒倒计时
        var get_verify_btn_register = $('#get_verify_btn_register');
        var verify_btn_register_next = $('#verify_btn_register_next');
        var verify_count_down = $('#verify-count-down');
        var reset_verify_a = $('#reset-verify-a');
        var count_down_a = $('#count-down-a');

        function clear_verify_data() {
            mobile_verify_input.val('');
            clearInterval(reset_timer);
            verify_count_down.text('60');
            get_verify_btn_register.fadeIn(100);
            verify_btn_register_next.fadeOut(100);
            $("#message-inf").fadeOut(100);
        }

        $(".signup-form input").on("focus", function () {
            $(this).parent().addClass("border");
        });
        $(".signup-form input").on("blur", function () {
            $(this).parent().removeClass("border");
        })
        //注册方式切换
        $(".signup-select").on("click", function () {
            var _text = $(this).text();
            var $_input = $(this).prev();
            $_input.val('');
            if (_text == "手机注册") {
                $(".signup-tel").fadeIn(200);
                $(".signup-email").fadeOut(180);
                $(this).text("邮箱注册");
                $_input.attr("placeholder", "手机号码");
                $_input.attr("onblur", "verify.verifyMobile(this)");
                $(this).parents(".form-group").find(".error-notic").text("手机号码格式不正确")

            }
            if (_text == "邮箱注册") {
                $(".signup-tel").fadeOut(180);
                $(".signup-email").fadeIn(200);
                $(this).text("手机注册");
                $_input.attr("placeholder", "邮箱");
                $_input.attr("onblur", "verify.verifyEmail(this)");
                $(this).parents(".form-group").find(".error-notic").text("邮箱格式不正确")
            }
        });

        //表单验证
        function showNotic(_this, focus) {
            $(_this).parents(".form-group").find(".error-notic").fadeIn(100);
            if (focus) {
                $(_this).focus();
            }
        }//错误提示显示
        function hideNotic(_this) {
            $(_this).parents(".form-group").find(".error-notic").fadeOut(100);
        }//错误提示隐藏

        function code_verify(verify_id) {
            var _value = $(verify_id).val();

            $.ajaxSetup({
                        data:{
                            csrfmiddlewaretoken:'{{ csrf_token }}',
                            verify: _value
                        }
                    });
                    $.post(
                        "{% url 'zhongbao_admin:send_verify' %}",
                        function(response){
                            if (response != 1){
                                showNotic(verify_id);
                                _handle = false;


                            }
                            else {
                                hideNotic(verify_id);
                                _handle = true;
                            }

                        }
                    );


        }//验证验证码

        //步骤切换
        var _boxCon = $(".box-con");
        $(".move-login").on("click", function () {
            $(_boxCon).css({
                'marginLeft': 0
            })
        });
        $(".move-signup").on("click", function () {
            clear_verify_data();
            $(_boxCon).css({
                'marginLeft': -320
            })
        });
        $(".move-other").on("click", function () {
            $(_boxCon).css({
                'marginLeft': -640
            })
        });
        $(".move-reset").on("click", function () {
            $(_boxCon).css({
                'marginLeft': -960
            })
        });
        {#        $("body").on("click", ".move-addinf", function () {#}
        {#            $(_boxCon).css({#}
        {#                'marginLeft': -1280#}
        {#            })#}
        {#        });#}
        verify_btn_register_next.click(function () {

            code_verify('#register_verify_code')
            var mobile_org = mobile_verify_input.val();
            $('#mobile_display_span').text(mobile_org.slice(0, 3) + "****" + mobile_org.slice(7, 11));
            $('#mobile_post').val(mobile_org);
            if (_handle) {
                $(_boxCon).css({
                    'marginLeft': -1280
                })
            }
        });


        var verify = {
            verifyEmail: function (_this) {
                var validateReg = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
                var _value = $(_this).val();
                if (!validateReg.test(_value)) {
                    showNotic(_this, true);
                    _handle = false;
                } else {
                    hideNotic(_this);
                    _handle = true;
                }
            },//验证邮箱
            verifyMobile: function (_this) {
                var _value = $(_this).val();
                if (!mobile_validateReg.test(_value)) {
                    showNotic(_this, true);
                    _handle = false;
                } else {
                    hideNotic(_this);
                    _handle = true;
                }
                return _handle
            },//验证手机号码
            UsernameVerify: function (_this) {
                var _value = $(_this).val();
                var data = username_verify($(_this));
                if (!data.tag) {
                    showNotic(_this, true);
                    _handle = false;
                } else {
                    hideNotic(_this);
                    _handle = true;
                }
                return _handle
            },//验证用户名
            PasswordLenght: function (_this) {
                var _val = $(_this).val();
                var verify_data = password_test($(_this));
                if (!verify_data.tag) {
                    showNotic(_this, true);
                    _handle = false;
                } else {
                    hideNotic(_this);
                    _handle = true;
                }
            },//验证设置密码长度
            PasswordAccordance: function (_this) {
                var _val = $(_this).val();
                if($('#register_p1_reset').val()){
                    var password1 = $('#register_p1_reset').val();
                } else {
                    password1 = $('#register_p1').val();
                }

                if (_val != password1) {
                    showNotic(_this);
                    _handle = false;
                } else {
                    hideNotic(_this);
                    _handle = true;
                }
            },//验证设置密码是否一致
            VerifyCount: function (_this) {
                var _value = $(_this).val();
                $.ajaxSetup({
                    data:{
                        csrfmiddlewaretoken:'{{ csrf_token }}',
                        verify: _value
                    }
                });
                $.post(
                    "{% url 'zhongbao_admin:send_verify' %}",
                    function(response){
                        if (response == 1){
                            hideNotic(_this);
                            _handle = true;
                        }
                        else {
                            showNotic(_this);
                            _handle = false;
                        }
                    }
                );

            },//验证手机验证码
            VerifyEmailCount: function (_this) {
                var _value = $(_this).val();
                hideNotic(_this);
                $.ajaxSetup({
                    data:{
                        csrfmiddlewaretoken:'{{ csrf_token }}',
                        verify: _value
                    }
                });
                $.post(
                    "{% url 'zhongbao_admin:verify_email' %}",
                    function(response){
                        if (response == 1){

                            hideNotic(_this);
                            _handle = true;
                        }
                        else {
                            showNotic(_this);
                            _handle = false;
                        }
                    }
                );
            }//验证邮箱验证码

        };

        //获取短信验证码
        var messageVerify = function () {
            $(".get-message").on("click", function () {

                if (_handle) {
                    $.ajaxSetup({
                        data:{
                            csrfmiddlewaretoken:'{{ csrf_token }}',
                            mobile: $('.email-mobile').val()
                        }
                    });
                    $.post(
                        "{% url 'zhongbao_admin:send_message' %}",
                        function(response){
                            if (response.Code=='OK'){
                                resetTime(60);
                                $("#message-inf").fadeIn(100);
                                verify_btn_register_next.fadeIn(100);
                                get_verify_btn_register.fadeOut(100);
                            }
                            else {
                                console.log(response)
                                alert(response.Code)
                            }
                        }
                    );
                } else {
                    alert('请填写正确的手机号！');
                }
            });
        }();


        // 60秒倒计时
        function resetTime(time) {
            var t = time;
            var s = time;

            function countDown() {
                s--;
                s < 10 && (s = '0' + s);
                verify_count_down.text(s);
                if (s == 0) {
                    clearInterval(reset_timer);
                    verify_count_down.text('60');
                    count_down_a.fadeOut(100);
                    reset_verify_a.fadeIn(100);
                }
            }

            reset_timer = setInterval(countDown, 1000);
        }
        reset_verify_a.click(function () {
            $.ajaxSetup({
                data:{
                    csrfmiddlewaretoken:'{{ csrf_token }}',
                    mobile: $('.email-mobile').val()
                }
            });
            $.post(
                "{% url 'zhongbao_admin:send_message' %}",
                function(response){
                    if (response.Code=='OK'){
                        resetTime(60);
                        reset_verify_a.fadeOut(100);
                        count_down_a.fadeIn(100);
                    }

                }
            );

        });
        $('#login-btn').click(function () {
            $('#login-loading-img').css('display', 'block');
        });


        $('#send-reset-code').click(function(){
            $('#reset-count').attr('value',$('#email-address').val()) ;
            if (_handle) {
                var email = $('#email-address').val();
                $.ajaxSetup({
                    data:{
                        csrfmiddlewaretoken:'{{ csrf_token }}',
                        email: email
                    }
                });
                $.post(
                    "{% url 'zhongbao_admin:send_email' %}",
                    function(response){
                        if (response==1){
                            alert('发送成功！请前往邮箱查收验证码。');
                            resetTime(60);
                            $('.send-email').fadeOut(100);
                            $('.email-verify').fadeIn(100);
                        }else if(response==2) {
                            alert('该邮箱不存在！');
                        }
                        else {
                            alert(response)
                        }
                    }
                );

            } else {
                alert('请填写正确的邮箱！');
            }
        });//发送邮件

    </script>
{% endblock body_tail %}
